<template>
  <div class="course-root">
    <p class="title">请假申请</p>
    <el-form :model="form" label-width="auto" style="margin-top: 30px;">


      <el-form-item label="班主任">
        <el-input disabled v-model="headTeacherName" style="width: 200px" />
      </el-form-item>

      <el-form-item label="辅导员">
        <el-input disabled v-model="counselorName" style="width: 200px" />
      </el-form-item>


      <el-form-item label="事由">
        <el-input v-model="reasonVal" type="textarea" rows="6" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit"
          style="margin-left: 90%;width: 120px;height: 36px;margin-top: 20px;">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { inject, onMounted, reactive, ref } from "vue";
import axios from "../utils/http.ts"
const message = inject("message");
import { useUserStore } from "../store/user.ts";
const userStore = useUserStore();
const headTeacherName = ref("");
const counselorName = ref("");
const loadData = async () => {
  if (userStore && userStore.user.roleId == 1) {
    getNameById(userStore.user.headTeacherId).then(res => {
      headTeacherName.value = res
    })
    getNameById(userStore.user.counselorId).then(res => {
      counselorName.value = res
    })
  }
}

const getNameById = async (id) => {
  const res = await axios.get(`/user/getTeacherNameById/${id}`);
  if (res.success) {
    return res.result;
  }
}

const reasonVal = ref("");
const form = reactive({
  "id": null,
  "studentId": null,
  "headTeacherId": null,
  "counselorId": null,
  "status": null,
  "reason": null
})

const handleSubmit = async () => {
  if (!reasonVal.value.trim()) {
    message.warning("请补充请假理由!")
  }
  else {
    form.studentId = userStore.user.id;
    form.reason = reasonVal.value;
    const res = await axios.post('/user/studentAskForLeave', form);
    if (res.success) {
      message.success(res.message);
      reasonVal.value = "";
    } else {
      message.error(res.message);
    }
  }
}





onMounted(() => {
  loadData();
})
</script>

<style lang="scss" scoped>
.course-root {
  display: flex;
  flex-direction: column;
  padding: 20px;
  padding-top: 30px;
  height: 100%;
  width: 100%;

  .title {
    border-left: 3px solid var(--el-color-primary);
    padding-left: 10px;
    height: 16px;
    line-height: 16px;
    font-weight: 600;
    color: var(--el-menu-text-color);
  }

  .el-table:deep(.el-table__row) {
    height: 56px;
  }
}
</style>